import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, DatePicker } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';
// import Customer from '../../components/Customer';
import DictCode from '../../components/DictCode';

const FormItem = Form.Item;
const { MonthPicker } = DatePicker;

@connect(({ loading, salaybatchcs }) => ({
  loading: loading.models.salaybatchcs || false,
  salaybatchcs,
}))
@Form.create()
class BasicForm extends React.Component {
  componentDidMount() {
    // 获取当前角色所在公司对应的平台供应商
    const {
      dispatch,
      salaybatchcs: { isGoBack = false },
    } = this.props;
    if (!isGoBack) {
      dispatch({
        type: 'salaybatchcs/updateQuery',
        payload: {
          custId: undefined,
          custName: undefined,
          incmType: undefined,
          busiYm: undefined,
          wageDate: undefined,
          falg: '2', // 是否变更发放日期
          wageReaSendDate: undefined,
          reaRsn: undefined,
        },
      });
    }
  }

  // 选择客户名称
  selectCustomers = (custId, options) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'salaybatchcs/updateQuery',
      payload: { custId, custName: options.props.children || '' },
    });
  };

  // 选择变更发放日期
  selectChangeFalg = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'salaybatchcs/updateQuery',
      payload: { falg: e.target.value },
    });
  };

  // 下一步
  nextStep = () => {
    const {
      form,
      onNext,
      dispatch,
      batchQuery: { wageFalg },
    } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      const temp = values;
      if (!err) {
        Object.keys(values).forEach(key => {
          if (key === 'busiYm') {
            temp[key] = Number(values[key].format('YYYYMM'));
          }
        });
        const batchSendInfo = { ...values, wageFalg };
        dispatch({
          type: 'salaybatchcs/updateQuery',
          payload: { ...values },
        });
        onNext(batchSendInfo);
      }
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      batchQuery,
    } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
    return (
      <Form style={{ margin: '40px auto 0', maxWidth: 800 }}>
        {/* <FormItem {...formItemLayout} label="客户名称">
          {getFieldDecorator('custId', {
            rules: [{ required: true, message: '请选择' }],
            initialValue: batchQuery.custId,
          })(<Customer getData={this.selectCustomers} />)}
        </FormItem> */}
        <FormItem {...formItemLayout} label="收入类型">
          {getFieldDecorator('incmType', {
            rules: [{ required: true, message: '请选择' }],
            initialValue: batchQuery.incmType,
          })(<DictCode dictType="WAGE_INCM_TYPE" />)}
        </FormItem>
        <FormItem {...formItemLayout} label="收入年月">
          {getFieldDecorator('busiYm', {
            rules: [{ required: true, message: '请选择' }],
            initialValue:
              batchQuery.busiYm &&
              moment(
                `${batchQuery.busiYm.toString().substr(0, 4)}-${batchQuery.busiYm
                  .toString()
                  .substr(4, 5)}`
              ),
          })(<MonthPicker placeholder="请选择" style={{ width: '100%' }} format="YYYY-MM" />)}
        </FormItem>
        <div style={{ marginTop: 100, textAlign: 'center' }}>
          <Button
            onClick={() => router.push('/salarymanage/protection/index')}
            style={{ marginRight: 8 }}
          >
            返回
          </Button>
          <Button type="primary" onClick={this.nextStep}>
            下一步
          </Button>
        </div>
      </Form>
    );
  }
}

export default BasicForm;
